<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=kqTkqrYwVtuzdM5bhbViBmpM6AiUq0if"></script>
    <link href="../../../febs/baiduMap/css/DrawingManager.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../../febs/baiduMap/js/DrawingManager.min.js"></script>
    <script type="text/javascript" src="../../../febs/baiduMap/js/AreaRestriction.min.js"></script>
  <style>
    body,html,#container{
      overflow: hidden;
      width: 100%;
      height:100%;
      margin: 0;
      font-family: "微软雅黑";
    }
    .info{
      z-index: 999;
      width: auto;
      min-width: 22rem;
      padding: .75rem 1.25rem;
      margin-left: 1.25rem;
      position: fixed;
      top: 1rem;
      background-color: #fff;
      border-radius: 25rem;
      font-size: 14px;
      color: #666;
      box-shadow: 0 2px 6px 0 rgba(27,142,236,0.5);
    }
    .drawing-panel{
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 2.5rem;
        padding-left: 0;
        border-radius: .25rem;
        height: 47px;
        box-shadow: 0 2px 6px 0 rgba(27,142,236,0.5);
    }
    .bmap-btn{
        border-right: 1px solid #d2d2d2;
        float: left;
        width: 64px;
        height: 100%;
        background-image: url("../../../febs/baiduMap/img/bg_drawing_tool.png");
        cursor: pointer;
    }
    .drawing-panel .bmap-marker{
        background-position: -65px 0;
    }
    .drawing-panel .bmap-polyline{
        background-position: -195px 0;
    }
    .drawing-panel .bmap-rectangle{
        background-position: -325px 0;
    }
    .drawing-panel .bmap-polygon{
        background-position: -260px 0;
    }
    .drawing-panel .bmap-circle{
        background-position: -130px 0;
    }
  </style>
</head>
<body>
<ul id="drawing-panel" class="drawing-panel">
    <li class="bmap-btn bmap-marker" id="marker" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
    <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>
  <div id="container"></div>
</body>
</html>
<script>

    var points = [];
    if(localStorage.getItem("points") != null){
        points = eval(JSON.parse(localStorage.getItem("points"))); //地图上所有点
    }
    var areaPoint = []; //区域内的点

    var map = new BMapGL.Map('container'); //创建Map实例，GL版命名空间为BMapGL

    if(points.length>0){
        var viewport = map.getViewport(points);
        map.centerAndZoom(viewport.center,viewport.zoom);
        document.getElementById("drawing-panel").style.display = 'none';
    }else{
        map.centerAndZoom(new BMapGL.Point(116.404,39.915),12); //初始化地图，设置中心点坐标和地图级别
    }
    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

    var menu = new BMapGL.ContextMenu();
    var txtMenuItem = [
        {
            text:'放大',
            callback:function () {
                map.zoomIn();
            }
        },
        {
            text:'缩小',
            callback:function () {
                map.zoomOut();
            }
        },{
            text:'清除',
            callback:function () {
                map.clearOverlays();
                areaPoint = [];
                BMapGLLib.AreaRestriction.clearBounds();
                document.getElementById("drawing-panel").style.display = '';
            }
        }
    ];

    for(var i=0;i<txtMenuItem.length;i++){
        menu.addItem(
            new BMapGL.MenuItem(
                txtMenuItem[i].text,
                txtMenuItem[i].callback,
                {
                    width:100,
                    id:'menu'+i
                }
        ));
    }
    map.addContextMenu(menu);

    var styleOptions={
        strokeColor:'#5E87DB', //边线颜色
        fillColor:'#5E87DB', //填充颜色。单参数为空时，圆形没有填充颜色
        strokeWeight:2, // 边线宽度，以像素为准
        strokeOpacity:1, //边线透明度，取值范围0-1
        fillOpacity:0.2  //填充透明度，取值范围0-1
    };
    var labelOptions = {
        borderRadius:'2px',
        background:'#FFFBCC',
        border:'1px solid #E1E1E1',
        color:'#703A04',
        fontSize:'12px',
        letterSpacing:'0',
        padding:'5px'
    }

    var overlays = [];
    var overlaycomplete = function (e) {
        overlays.push(e.overlay);
        for(var i=0;i<e.overlay.getPath().length;i++){
            let coordinate = {};
            coordinate.lng = e.overlay.getPath()[i].lng;
            coordinate.lat = e.overlay.getPath()[i].lat;
            areaPoint.push(coordinate);
        }
        console.log(areaPoint);
        localStorage.setItem("newPoints",JSON.stringify(areaPoint));
        document.getElementById("drawing-panel").style.display = 'none';
    }

    function renderMap(){
        var markers = [];
        if(points.length>0){
            points.forEach(v=>{
                const point = new BMapGL.Point(v.lng,v.lat);
                markers.push(point)
            })
            var polygon = new BMapGL.Polygon(markers,styleOptions);
            map.addOverlay(polygon);

            let half = Math.ceil(points.length/2);
            var bound = new BMapGL.Bounds(new BMapGL.Point(points[0].lng,points[0].lat),new BMapGL.Point(points[half].lng,points[half].lat));
            try {
                BMapGLLib.AreaRestriction.setBounds(map,bound);
            }catch (e) {
                console.log(e);
            }
        }
        localStorage.removeItem("points");
    }

    //实例化鼠标绘制工具
    var drawingManager = new BMapGLLib.DrawingManager(map,{
        isOpen:false, //是否开启绘制模式
        enableCalculate:false, //绘制是否进行测距测面
        enableSorption:true, //是否开启边界吸附功能
        sorptiondistance:20, //边界吸附距离
        circleOptions:styleOptions, //圆的样式
        polylineOptions:styleOptions, //线的样式
        polygonOptions:styleOptions, //多边形的样式
        rectangleOptions:styleOptions, //矩形的样式
        labelOptions:labelOptions, //label的样式
    });

    function draw(e){
        var arr = document.getElementsByClassName("bmap-btn");
        for(var i=0;i<arr.length;i++){
            arr[i].style.backgroundPositionY = '0';
        }
        e.style.backgroundPositionY = '-52px';
        switch (e.id){
            case 'marker':{
                var drawingType = BMAP_DRAWING_MARKER;break
            }
            case 'polyline':{
                var drawingType = BMAP_DRAWING_POLYLINE;break
            }
            case 'rectangle':{
                var drawingType = BMAP_DRAWING_RECTANGLE;break
            }
            case 'polygon':{
                var drawingType = BMAP_DRAWING_POLYGON;break
            }
            case 'circle':{
                var drawingType = BMAP_DRAWING_CIRCLE;break
            }
        }
        if(drawingManager.isOpen && drawingManager.getDrawingMode() === drawingType){
            drawingManager.close();
        }else{
            drawingManager.setDrawingMode(drawingType);
            drawingManager.open();
        }

    }

    drawingManager.addEventListener('overlaycomplete',overlaycomplete);
    renderMap();


</script>